<template>
  <div class="Complaint" ref="homePage">
    <div class="bj">
      <van-nav-bar title="投诉" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="Complaint_bj">
      <div class="guangbo" style="background: #3ea39d; ">
        <van-icon name="volume-o" />
        <p style="">小播报</p>
      </div>
      <div class="gbContainer">
        <div class="swipe swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(data,index) in datalist" :key="index">
              <div class="broadcast">
                <div class="bcImg"><img src="https://wenlv.botuu.com/public/statics/img/default.jpg" /></div>
                <div class="broadcast_txt">
                  <p>{{data.Content}}</p>
                  <div class="broadcast_date">
                    <div>{{data.StatusStr}}</div>
                    <div>{{data.CreateDate}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="online">
      <p style="font-weight: 400;font-size: 15px;">投诉方式</p>
      <div class="online_a" @click="Complaint"></div>
      <div class="online_b"><a style="width: 100%;height: 100%;display: block;" href="tel:075526476789"></a></div>
      <p style="text-align: center;margin-top: 10px;border: none !important; color: #888888;">安易游官方投诉平台 为你全程保驾护航</p>
    </div>

  </div>
</template>

<script>
import Swiper from 'swiper'
// import 'swiper/dist/css/swiper.min.css';
import {
  MessageBoardList
} from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', // 获取页面高度
      datalist: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    this.MessageBoardList()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    Complaint () {
      this.$router.push({
        path: '/Complaint/OnlineUpload'
      })
    },
    MessageBoardList () {
      let data = {
        GetPublic: 1
      }
      MessageBoardList(data).then(res => {
        console.log(res)
        this.datalist = res.List
        this.$nextTick(function () {
          this.swiper()
        })
      })
    },
    swiper () {
      var swiper1 = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        autoplay: true,
        loop: true,
        spaceBetween: 10,
        direction: 'vertical',
        grabCursor: true,
        autoplayDisableOnInteraction: false,
        mousewheelControl: true,
        autoHeight: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.Complaint {
  background: white;
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .Complaint_bj {
    width: 100%;
    height: 280px;
    background: #46d0ca;
    .guangbo {
      display: flex;
      width: 25%;
      height: 35px;
      color: #b9fffb;
      font-weight: 4600;
      border-radius: 30px;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      position: relative;
      top: 20px;
      left: 20px;
      .van-icon {
        color: #b9fffb !important;
        font-size: 16px !important;
      }
    }

    .gbContainer {
      width: 90%;
      margin: 0 auto;
      height: 180px;
      overflow: hidden;
      border-radius: 15px;
      margin-top: 40px;
      background: white;
      padding: 10px 0;
    }

    .swipe {
      height: 168px;
      .swiper-wrapper {
        width: 100% !important;
        position: relative;
      }
      .swiper-slide {
        width: 100% !important;
        .broadcast {
          display: flex;
          width: 100%;
          height: 100%;
          padding: 0 20px;
          .bcImg {
            vertical-align: top;
            width: 40px;
            height: 40px;
          }
          img {
            width: 40px;
            height: 40px;
            border-radius: 30px;
            margin-right: 10px;
          }
          .broadcast_txt {
            display: flex;
            flex-direction: column;
            margin-left: 5px;
            font-weight: 400;
            color: #5c5c5c;
            width: 100%;
            overflow: hidden;
            p {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .broadcast_date {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              div {
                width: 70%;
                color: #999;
              }
            }
          }
        }
      }
    }
  }

  .online {
    width: 90%;
    display: flex;
    justify-content: space-around;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-top: 40px;
    flex-wrap: wrap;
    border-radius: 8px;
    box-shadow: 0px 0px 1px 1px #eee;

    p {
      width: 85%;
      height: 40px;
      text-align: center;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      margin-bottom: 20px;
      // font-size: 16px;
    }

    .online_a {
      width: 17%;
      height: 150px;
      background: url(../../assets/u1691.jpg) no-repeat;
      background-size: 100%;
    }

    .online_b {
      width: 19%;
      height: 150px;
      background: url(../../assets/u1690.jpg) no-repeat;
      background-size: 100%;
    }
  }
}
</style>
